<style type="text/css">
    .app {
        list-style: none;
    }
    .app li {
        overflow: hidden;
    }
    #lineHeightSettingContainer, #mailSettings {
        position: relative;
        float: left;
    }
    .label {
        float: left;
        width: 150px;
        font-size: 14px;
        font-weight: 700;
    }
</style>
<ul class="app">
    <li>
        <span class="label">行高设置：</span>
        <div id="lineHeightSettingContainer"></div>
    </li>
    <li id="rButtonContainer">

    </li>
    <li>
        <span class="label">邮箱设置：</span>
        <div id="mailSettings"></div>
    </li>
     <li id="cButtonContainer">

    </li>
</ul>
<script type="text/javascript">

    ~function() {
        var rg = new Neter.RadioGroup({
            container     : $('#lineHeightSettingContainer'),
            showType      : 'v',
            selectedEvent : function(radioGroup, options, event) {
                // console.log('单击的单选按钮：%o', options);
            },
            radios : [{
                tag      : '宽松',
                name     : '宽松',
                value    : 'ks'
            }, {
                tag      : '适中',
                name     : '适中',
                value    : 'sz',
                selected : true,
                disabled : true
            }, {
                tag      : '紧凑',
                name     : '紧凑',
                value    : 'jc'
            }, {
                tag      : '密集',
                name     : '密集',
                value    : 'mj'
            }]
        }).render().disabled(false);

        new Neter.Button({
            container  : $('#rButtonContainer'),
            name       : '获取单选钮组选中项',
            clickEvent : function(button, options, event) {
                Neter.log('选中的按钮：%o', rg.selected(), 'log');
            }
        }).render();

         var cg = new Neter.CheckboxGroup({
            container     : $('#mailSettings'),
            showType      : 'v',
            selectedEvent : function(checkboxGroup, options, event) {
                // console.log('当前项：%o', options);
            },
            checkboxes : [{
                tag   : '紧急',
                name  : '紧急',
                value : 'jj'
            }, {
                tag      : '已读回执',
                name     : '已读回执',
                value    : 'ydhz',
                selected : true,
                disabled : true
            }, {
                tag   : '纯文本',
                name  : '纯文本',
                value : 'cwb'
            }, {
                tag   : '邮件加密',
                name  : '邮件加密',
                value : 'yjjm'
            }]
        }).render().selected('紧急', '邮件加密');

        new Neter.Button({
            container  : $('#cButtonContainer'),
            name       : '获取多选钮组选中项',
            clickEvent : function(button, options, event) {
                Neter.log('选中的按钮：%o', cg.selected(), 'log');
            }
        }).render();
    }();
</script>